<?php echo $this->Html->css('nv.d3'); ?>
<style>
    body {
        overflow-y:scroll;
    }

    text {
        font: 12px sans-serif;
    }

    .mypiechart {
        width: 500px;
        border: 2px;
    }
</style>
<div class="grid_container"> 
    <div class="grid_6">       
        <div class="widget_wrap">
            <div class="widget_top">
                <span class="h_icon list"></span>
                <h6>Reportes por Fechas</h6>
            </div>
            <div class="widget_content"> 
                <!--<form action="#" method="post" class="form_container left_label field_set">-->
                <?php
                echo
                $this->Ajax->form(array('type' => 'post',
                    'options' => array(
                        'model' => 'Reportes',
                        'update' => 'cargaReporteMV',
                        'class' => "form_container",
                        'url' => array(
                            'controller' => 'Reportes',
                            'action' => 'ajaxmujeresvarones'
                        ),
                    )
                ));
                ?>
                <ul>
                    <li>
                        <fieldset>
                            <legend>Formulario Genero</legend>
                            <label class="field_title">Seleccione las Fechas</label>
                            <div class="form_input">
                                <div class=" form_grid_4 alpha">
                                    <input type="date" name="data[Reporte][fechaInicio]">
                                    <span class=" label_intro">Desde</span>
                                </div>
                                <div class=" form_grid_4">
                                    <input type="date" name="data[Reporte][fechaFin]">
                                    <span class=" label_intro">Hasta</span>
                                </div>
                                <div class=" form_grid_4">
                                    <button type="submit" class="btn_small btn_blue"><span>Generar Reporte</span></button>    
                                    <?php $this->form->end();?>                                                                  
                                </div>
                                <span class="clear"></span>
                            </div>                      
                    </li>                        
                    </fieldset>  
                </ul>
                </form>               
            </div>
            <div class="widget_content"> 
                <!--<form action="#" method="post" class="form_container left_label field_set">-->
                <?php
                echo
                $this->Ajax->form(array('type' => 'post',
                    'options' => array(
                        'model' => 'Reportes',
                        'update' => 'cargaReporteMV',
                        'class' => "form_container",
                        'url' => array(
                            'controller' => 'Reportes',
                            'action' => 'ajaxreporte'
                        ),
                    )
                ));
                ?>
                <ul>
                    <li>
                        <fieldset>
                            <legend>Formulario Reporte</legend>
                            <label class="field_title">Seleccione las Fechas</label>
                            <div class="form_input">
                                <div class=" form_grid_4 alpha">
                                    <input type="date" name="data[Reporte][fechaInicio]">
                                    <span class=" label_intro">Desde</span>
                                </div>
                                <div class=" form_grid_4">
                                    <input type="date" name="data[Reporte][fechaFin]">
                                    <span class=" label_intro">Hasta</span>
                                </div>
                                <div class=" form_grid_4">
                                    <button type="submit" class="btn_small btn_blue"><span>Generar Reporte</span></button> 
                                    <?php $this->form->end();?>                                                                     
                                </div>
                                <span class="clear"></span>
                            </div>                      
                    </li>                        
                    </fieldset>  
                </ul>
                </form>               
            </div>
            <div class="widget_content"> 
                <!--<form action="#" method="post" class="form_container left_label field_set">-->
                <?php
                echo
                $this->Ajax->form(array('type' => 'post',
                    'options' => array(
                        'model' => 'Reportes',
                        'update' => 'cargaReporteMV',
                        'class' => "form_container",
                        'url' => array(
                            'controller' => 'Reportes',
                            'action' => 'ajaxtipoatencion'
                        ),
                    )
                ));
                ?>
                <ul>
                    <li>
                        <fieldset>
                            <legend>Formulario Reporte Tipo De Atencion</legend>
                            <label class="field_title">Seleccione las Fechas</label>
                            <div class="form_input">
                                <div class=" form_grid_4 alpha">
                                    <input type="date" name="data[Reporte][fechaInicio]">
                                    <span class=" label_intro">Desde</span>
                                </div>
                                <div class=" form_grid_4">
                                    <input type="date" name="data[Reporte][fechaFin]">
                                    <span class=" label_intro">Hasta</span>
                                </div>
                                <div class=" form_grid_4">
                                    <button type="submit" class="btn_small btn_blue"><span>Generar Reporte</span></button> 
                                    <?php $this->form->end();?>                                                                     
                                </div>
                                <span class="clear"></span>
                            </div>                      
                    </li>                        
                    </fieldset>  
                </ul>
                </form>               
            </div>
            <div class="widget_content"> 
                <!--<form action="#" method="post" class="form_container left_label field_set">-->
                <?php
                echo
                $this->Ajax->form(array('type' => 'post',
                    'options' => array(
                        'model' => 'Reportes',
                        'update' => 'cargaReporteMV',
                        'class' => "form_container",
                        'url' => array(
                            'controller' => 'Reportes',
                            'action' => 'ajaxedad'
                        ),
                    )
                ));
                ?>
                <ul>
                    <li>
                        <fieldset>
                            <legend>Formulario Reporte Edad</legend>
                            <label class="field_title">Seleccione las Fechas</label>
                            <div class="form_input">
                                <div class=" form_grid_4 alpha">
                                    <input type="date" name="data[Reporte][fechaInicio]">
                                    <span class=" label_intro">Desde</span>
                                </div>
                                <div class=" form_grid_4">
                                    <input type="date" name="data[Reporte][fechaFin]">
                                    <span class=" label_intro">Hasta</span>
                                </div>
                                <div class=" form_grid_4">
                                    <button type="submit" class="btn_small btn_blue"><span>Generar Reporte</span></button> 
                                    <?php $this->form->end();?>                                                                     
                                </div>
                                <span class="clear"></span>
                            </div>                      
                    </li>                        
                    </fieldset>  
                </ul>
                </form>               
            </div>
        </div>
    </div>

    <div class="grid_6">       
        <div class="widget_wrap">
            <div class="widget_top">
                <span class="h_icon list"></span>
                <h6>Resultados</h6>
            </div>
            <div class="widget_content">
                <div id="cargaReporteMV">
                    carga Aqui
                </div>
                <span class="clear"></span>
            </div>
        </div>
    </div>
</div>
<script src="<?php $this->webroot; ?>js/graficos/d3.v2.min.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/nv.d3.min.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/legend.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/pie.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/pieChart.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/utils.js"></script>
<script>

    //datos y graico por genero
    var testdata = [
        {
            key: "Varones",
            y: <?php echo $cantidadVarones; ?>
        },
        {
            key: "Mujeres",
            y: <?php echo $cantidadMujeres; ?>
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#test1")
                .datum([testdata])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

    //datos grafico por ciudad o provincia
    var lugar = [
        {
            key: "Ciudad",
            y: <?php echo $cantidadProvincia; ?>,
        },
        {
            key: "Provincia",
            y: <?php echo $cantidadCiudad; ?>,
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        chart.pie.donutLabelsOutside(true).donut(true);

        d3.select("#lugares")
                .datum([lugar])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

    //datos y grafico por tipo de atencion
    var tipoAtencion = [
<?php foreach ($tipoAtencion as $ta): ?>
            {
                key: "<?php echo $ta['Trauma']['nombre']; ?>",
                y: <?php echo $ta['0']['cantidad']; ?>
            },
<?php endforeach; ?>
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#tipoAtencion")
                .datum([tipoAtencion])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

    //datos y grafico por edad
    var edad = [
        {
            key: "Ninez (1 a 13)",
            y: <?php echo $cantidadNinos; ?>,
        },
        {
            key: "Adolecentes (14 a 18)",
            y: <?php echo $cantidadAdolecentes; ?>,
        },
        {
            key: "Adulto Joven (19 a 30)",
            y: <?php echo $cantidadAJovenes; ?>,
        },
        {
            key: "Adulto Mayor (31 a 60)",
            y: <?php echo $cantidadAMayor; ?>,
        },
        {
            key: "Tercera Edad (60 para adelante)",
            y: <?php echo $cantidadTedad; ?>,
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#edad")
                .datum([edad])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

</script>